<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是App组件</h1>
  <hr>
  <h1>一个人的信息：</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>性别：{{ sex }}</h2>
  <button @click="sayHello">说话【vue3配置的sayHello】</button>
  <button @click="sayWelcome">猜一猜我的性别【vue2配置的sayWelcome】</button>

  <!-- vue3、vue2的配置不要混用，否则会导致一些数据、方法等读取不到的问题出现 -->
  <button @click="test1">test1测试</button>
  <button @click="test2">test2测试</button>
</template>

<script>

export default {
  name: 'App',
  // 【备注：其中vue3是兼容vue2里面的data、methods】 需要注意的是data、methods是写到对象里面的，是键值对的格式的。而函数里面嵌套的函数是正常函数的写法。
  data() {
    return {
      sex: '男',
    }
  },
  methods: {
    sayWelcome() {
      console.log('sex', this.sex);
      alert('sex：' + this.sex)
    },
    // 测试vue2的写法读取vue2、vue3的数据以及方法
    test1() {
      console.log(this.sex);
      console.log(this.name);
      console.log(this.age);
      this.sayHello();
    }
  },
  // setup: function () {
  //
  // }

  // Vue3引入了新的配置项，值是一个函数，setup是所有Composition API（组合API）“ 表演的舞台 ”。
  // 组件中所用到的：数据、方法等等，均要配置在setup中。
  // - setup函数的两种返回值：
  //    - 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。【重点关注！】
  //    - 若返回一个渲染函数：则可以自定义渲染内容。【了解】
  setup() { // 这种方式只是测试一下setup，暂时不考虑响应式的问题。
    // 数据
    let name = '张三';
    let age = 18;

    // 方法
    function sayHello() {
      alert(`我叫 ${name}， 我${age} 岁了，您好啊！`);
    }

    // 测试vue2的写法读取vue2、vue3的数据以及方法
    function test2() {
      console.log(name);
      console.log(age);
      console.log(this.sex);
      // this.sayWelcome();
    }

    // 方式一：返回对象【常用】
    return {
      // name: name
      // age: age,
      // sayHello: sayHello,
      name, // 返回的对象是键值对的，如果键值对一致性可以触发省略写法
      age,
      sayHello,
      test2,
    }

    // 方式二：返回一个渲染函数【了解，基本不用】
    // return () => {
    //   return h('h1', name);
    // }

    // // 省略写法
    // return () => h('h1', name);
  },
}
</script>

<style>

</style>
